<template>
   <div class="card" style="width: 50% ;padding: 40px 20px">
    <el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="80px" style="padding-right: 50px;padding-top: 20px;">
      <div style="width: 100%;display: flex;justify-content: center;margin-bottom: 20px">
      <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/user/avatar"
          :headers="uploadHeaders"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
      >
        <img v-if="data.form.avatar" :src="data.form.avatar" class="avatar"  alt=""/>

        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
      <el-form-item label="账号" prop="username" >
        <el-input disabled v-model="data.form.username" autocomplete="off" placeholder="请输入账号" />
      </el-form-item >
     <el-form-item label="邮箱" prop="email" >
       <el-input v-model="data.form.email" autocomplete="off" placeholder="请输入邮箱" />
     </el-form-item >


    <div style="text-align: center">
      <el-button  @click="updateUser" type="primary" style="padding:20px 30px">更新个人信息</el-button>
    </div>
  </el-form>
</div>
</template>

<script setup>
import {reactive, ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {useMainStore} from "@/store/index.js";
const userStore=useMainStore()
const formRef=ref()
const data=reactive({

  form:{},
  rules:{
    username:[
      {required:true,message:'请输入账号',trigger:'blur'}
    ],
    email:[
      {required:true,message:'请输入邮箱',trigger:'blur'}
    ],
    // no:[
    //   {required:true,message:'请输入工号',trigger:'blur'}
    // ]
  }
})


const handleAvatarSuccess=(res)=>{
  console.log(data)
  data.form.avatar=res.data;
}
const token = userStore.token;
// 构造上传请求的头信息，携带令牌
const uploadHeaders = ref({
  'Authorization': `Bearer ${token}`  // 格式通常是 Bearer + 空格 + 令牌
});
console.log(localStorage.getItem("token"));
const updateUser=()=>{

}

</script>


<style scoped>

</style>